<template>
  <div class="list">
    <Menus :title="name" :home="true" />
    <div class="article_list">
      <ul>
        <li v-for="(item,index) in list" :key="'key-list-'+index">
          <router-link :to="'/post/'+item.id" v-if="!child_list">{{item.title}}</router-link>
          <router-link :to="'/listchildren/'+item.id" v-else>{{item.title}}</router-link>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import Menus from '../components/Menu'
import typename from '../datas/typename'
import api from '../datas/api'
// import axios from 'axios'

export default {
  data() {
    return {
      name: '',
      list: [],
      child_list: 0
    }
  },
  methods: {
    async loadList(diagramId) {
      this.child_list = 0
      const res = await this.$get(api.list + diagramId, this)
      this.list = res.result.data.items
    }
  },
  async mounted() {
    // axios.get('http://yn.12348.laway.cn/pufa/api/post/list/?per_page=500&diagram_id=5950c748cf339815ba0efe31').then(res => {
    //   console.log(res.data.result)
    //   this.list = res.data.result.items
    // })

    // const res = await axios.get('http://yn.12348.laway.cn/pufa/api/post/list/?per_page=500&diagram_id=5950c748cf339815ba0efe31')
    // console.log(res)
    // this.list = res.data.result.items

    const { child_list, includeChild } = this.$route.query
    const { diagramId } = this.$route.params
    const includeQuery = includeChild ? '&include_children=1' : ''
    const res = await this.$get(api.list + diagramId + includeQuery, this)
    this.child_list = child_list || 0
    this.list = child_list ? res.result.data.children : res.result.data.items
    this.name = typename[diagramId]
    console.log(this.list)
  },
  components: {
    Menus
  }
}
</script>
<style lang="scss">
.list {
  padding: 1.6rem 0 2rem;
  background: #ddd;
  min-height: 100vh;
  .article_list {
    width: 12rem;
    margin: 0.55rem auto 0;
    background-color: #fff;
    border-radius: 0.1rem;

    ul {
      list-style: none;
      padding: 0;
      li {
        height: 0.9rem;
        font-size: 0.28rem;
        line-height: 0.9rem;
        border-bottom: 1px solid #ddd;
        a {
          color: #333;
          display: block;
          padding: 0 0.45rem;
          height: 0.9;
          &:active {
            background-color: #eee;
          }
        }
      }
    }
  }
}
@media screen and (orientation: portrait) {
  .list {
    .article_list {
      width: 90%;
      box-shadow: 0.1rem 0.1rem 0.3rem rgba(0, 0, 0, 0.05);
    }
  }
}
@media screen and (orientation: landscape) {
}
</style>
